<template>
	<view v-if="order_info.address">
		<view class="header">
			<view class="header_box">
				<view class="orderStatus">
					<view class="icon">
						<image src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/order_state.png"></image>
					</view>
					<view class="status_txt">{{order_info.status_txt}}</view>
				</view>
				<view class="addtess_box">
					<view class="userInfo">
						<text>{{order_info.address.name}}</text>
						<text>{{order_info.address.phone}}</text>
					</view>
					<view class="addressDetail">{{order_info.address.all_detail}}</view>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in order_info.goods" :key="index" @click="jumpPage(item.goods_id)">
			<view class="goods_box">
				<view class="goods_img">
					<image :src="item.image"></image>
				</view>
				<view class="goods_info">
          <view class="u-line-2">{{item.goods_name}}<text class="gift" v-if="item.is_gift==1">(赠品)</text></view>
					<view class="goods_norms u-line-1">{{item.goods_attr}}</view>
					<view class="price_box">
						<view v-if="item.goods_status != 999">
							<u-tag border-color="#20cbd4" bg-color="#20cbd4" 
							color="#fff" :text="item.goods_status_txt" 
							shape="circle" />
						</view>
						<view v-if="item.goods_attr">¥{{item.goods_price}}</view>
						<view v-if="item.goods_attr">X{{item.total_num}}</view>
					</view>
					<view v-if="!item.goods_attr" style="margin-top: 20rpx;display: flex;justify-content: space-between;">
						<view >¥{{item.goods_price}}</view>
						<view>X{{item.total_num}}</view>
					</view>
				</view>
			</view>
			<view class="btn_part" style="margin-right: 20rpx;">
				<block v-for="(btn_item,btn_idx) in item.button" :key="btn_idx">
					<u-button style="margin-right: 20rpx;" @click="toPage(item,btn_item.sign,2)" size="mini" :custom-style="{background:'#20cbd4',color:'#fff'}">{{btn_item.name}}</u-button>
				</block>
			</view>
		</view>
		<view class="order_info">
			<view class="order_info_item">
				<view class="order_info_title">订单编号：</view>
				<view>{{order_info.order_no}}</view>
				<text class="copy" @click="onCopy(order_info.order_no)">复制</text>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">下单时间：</view>
				<view>{{order_info.create_time}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">支付状态：</view>
				<view v-if="order_info.pay_status==2">已支付</view>
				<view v-else>待支付</view>
			</view>
			<view class="order_info_item" v-if="order_info.pay_status==2&&order_info.order_goods_status[0]!=1">
				<view class="order_info_title">支付方式：</view>
				<view>{{order_info.pay_type_txt}}</view>
			</view>
			<view class="order_info_item" v-if="order_info.pay_status==2&&order_info.order_goods_status[0]!=1">
				<view class="order_info_title">支付时间：</view>
				<view>{{order_info.pay_time}}</view>
			</view>
		</view>
		<view class="order_info">
			<view class="order_info_item order_price">
				<view class="order_info_title">商品总额：</view>
				<view>¥{{order_info.total_price}}</view>
			</view>
			<view class="order_info_item order_price">
				<view class="order_info_title">运费：</view>
				<view>¥{{order_info.express_price}}</view>
			</view>
			<view class="order_info_item order_price">
				<view class="order_info_title">优惠金额：</view>
				<view>—¥{{order_info.coupon_money}}</view>
			</view>
			<view class="order_info_item order_price" v-if="order_info.order_source == 2||order_info.order_source == 4">
				<view class="order_info_title">券：</view>
				<view>—¥{{order_info.points_num}}</view>
			</view>
			<view class="order_info_item order_price">
				<view class="order_info_title" v-if="order_info.order_status == 2">应付款：</view>
				<view class="order_info_title" v-else >实付款：</view>
				<view style="color: #FA3534;">¥{{order_info.pay_price}}</view>
			</view>
		</view>
		<view class="navigation">
			<view class="right" v-for="(btn_item1,btn_idx1) in order_info.button" :key="btn_idx1">
				<view style="margin-left: 10rpx;" class="buy btn u-line-1" @click="toPage1(btn_item1.id,btn_item1.sign)">{{btn_item1.name}}</view>
			</view>
		</view>
		<u-modal v-model="show"  :show-cancel-button="true" :content="msg" @cancel="cancel" @confirm="confirm"></u-modal>
		<u-modal v-model="modalShow" :show-cancel-button="true" title="支付方式"
			:cancel-style="{color:'#909399'}" @confirm="payConfirm">
			<view class="slot-content">
				<view class="payTime">
					<view>支付剩余时间：</view>
					<view>
						<u-count-down :font-size="25" color="#909399" 
							:separator-size="25" separator-color="#909399"
						:timestamp="3000"></u-count-down>
					</view>
				</view>
				<view class="modelPrice">¥{{order_info.pay_price}}
				</view>
				<u-cell-group :border="false">			
					<u-cell-item :border-bottom="false" icon="rmb-circle-fill" :icon-style="{color:'#fece0a'}" v-if="money_pay_show && (q_id==1 || q_id==2 || q_id==3)"
					:icon-size="60" title="积分支付" :arrow="false">
						<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
							<u-radio name="yue" :icon-size="40">
							</u-radio>
						</u-radio-group>
					</u-cell-item>
					<!--  #ifdef MP-WEIXIN -->
						<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" v-if="mini_show_wx && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="微信支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="weixin" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef H5 -->
						<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" v-if="h5_show_wx && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="微信支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="weixin" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
						<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" v-if="h5_show_ali && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="支付宝支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="zhifubao" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
					<!-- #endif -->
					<!--  #ifdef APP-PLUS -->
						<u-cell-item :border-bottom="false" icon="weixin-fill" :icon-style="{color:'#1AAE0B'}" v-if="app_show_wx && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="微信支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="weixin" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
						<u-cell-item :border-bottom="false" icon="zhifubao" :icon-style="{color:'#1393E8'}" v-if="app_show_ali && (q_id==1 || q_id==2 || q_id==3)"
						:icon-size="60" title="支付宝支付" :arrow="false">
							<u-radio-group :size="40" v-model="payType" @change="radioChange" active-color="#f37b1d">
								<u-radio name="zhifubao" :icon-size="40">
								</u-radio>
							</u-radio-group>
						</u-cell-item>
					<!-- #endif -->
				</u-cell-group>
			</view>
		</u-modal>
		<u-modal width="80%" v-model="payPwdShow" :show-title="true"
		confirm-color="#20cbd4" :show-cancel-button="true" @confirm="payYE">
			<view class="modelContent">
				<view class="accountData">
					<text>交易密码：</text>
					<u-input v-model="payPassword" type="password"
						placeholder="请输入交易密码"/>
				</view>
			</view>
		</u-modal>
		<hoverMenu></hoverMenu>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {orderPayZfb,orderPayh5,hjWxOrderPay,orderDetail,orderCancle,orderPay,orderReceipt,wxminiGetOpenid,orderPayGzh,WxOrderPay} from "@/common/api.js";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				show:false,
				order_id:"",
				order_info:{},
				modalShow:false,
				payPwdShow:false,
				payPassword:'',
				payType:"yue",
				msg:"",
				sign:"",
				order_goods_id:"",
				sweixin:'',
				money_pay_show: 1,
				h5_show_ali: 1,
				h5_show_wx: 1,
				app_show_ali: 1,
				app_show_wx: 1,
				mini_show_ali: 1,
				mini_show_wx: 1,
				q_id:0,

			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			// #ifdef APP-PLUS
			var that= this;
			plus.share.getServices(function(s){  
				 var shares={};  
				 for (var i = 0; i < s.length; i++) {  
					 var t=s[i];  
					 shares[t.id]=t;  
				 }  
				 var sweixin=shares['weixin'];  
				 that.sweixin = sweixin
			 }, function(e){  
				 console.log("获取分享服务列表失败："+e.message);  
			 });  
			//#endif
		},
		onShow() {
			this.selectOrderDetail();
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectOrderDetail(){
				orderDetail(this,{order_id:this.order_id})
			},
			toPage(item,sign,type){
				this.order_goods_id = item.order_goods_id;
				if(sign == "comment"){
					//去评价
					//防止特殊字符，把内容清空
					item.content = "";
					uni.navigateTo({
						url:"/order/comment?goodsInfo="+JSON.stringify(item)+"&order_id="+this.order_id+"&type="+type
					})
				}else if(sign == "delivery"){
					//查看物流
					uni.navigateTo({
						url:"/user/logistics?order_id="+this.order_id+"&type=0"
					})
				}else if(sign == "receipt"){
					//确认收货
					this.msg = "您确定要收货吗？";
					this.sign = sign;
					this.show = true;
				}
			},
			payYE(){
				uni.showLoading({
					title: '支付中...'
				});
				this.payPwdShow=false;
				var pay_pwd=this.payPassword;
				this.payPassword="";
				orderPay(this,{pay_type:'yu_e',order_id:this.order_id,pay_pwd:pay_pwd})
			},
			settle(){
				var _this = this;
				_this.modalShow=false;
				if(_this.payType=='yue'){
					if(this.payPassword==""){
						this.payPwdShow=true;
					}else{
						this.payYE();
					}
					return;
				}
				uni.showLoading({
					title: '支付中...'
				});
				// #ifdef MP-WEIXIN
				if(uni.getStorageSync("openid")==""){
					uni.getSetting({
						success: function (a) {
							uni.getUserProfile({
								desc:'Wexin',  
								success: function (b) {
									 uni.login({
									    success (res) {
											uni.hideLoading();
									        if (res.code) {
												wxminiGetOpenid(_this,{code:res.code})
									        } else {
												_this.$refs.uToast.show({title: '授权获取失败',})
									        }
									    }
									})
								}
							});
						}
					});
				}
				if(uni.getStorageSync("openid")!="" && uni.getStorageSync("openid")!="undefined"){
					orderPay(this,{pay_type:'wx_mini',order_id:this.order_id,type:1})
				}
				// #endif
				// #ifdef APP-PLUS
					if(_this.payType=='zhifubao'){
						orderPayZfb(_this,{pay_type:'ali_h5',order_id:_this.order_id,type:1})
					}else{
						//微信App支付
						//WxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:1})
						//汇聚App支付
						hjWxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:1})
					}
				// #endif
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(_this.payType=='zhifubao'){
							uni.hideLoading();
							_this.$refs.uToast.show({title: '微信浏览器无法用支付宝支付',})
						}else{
							orderPayGzh(_this,{pay_type:'wx_chat',order_id:_this.order_id,type:1})
						}
					}else{
						if(_this.payType=='zhifubao'){
							orderPayZfb(_this,{pay_type:'ali_h5',order_id:_this.order_id,type:1})
						}else{
							orderPayh5(_this,{pay_type:'wx_h5',order_id:_this.order_id,type:1})
						}
					}
				// #endif
			},
			toPage1(id,sign){
				if(sign == "pay"){
					//支付
					this.q_id = this.order_info.order_source;				
					this.h5_show_ali = this.order_info.paystate.h5_show_ali;
					this.h5_show_wx = this.order_info.paystate.h5_show_wx;
					this.app_show_ali = this.order_info.paystate.app_show_ali;
					this.app_show_wx = this.order_info.paystate.app_show_wx;
					this.mini_show_ali = this.order_info.paystate.mini_show_ali;
					this.mini_show_wx = this.order_info.paystate.mini_show_wx;
					this.modalShow=true;
				}else if(sign == "cancel"){
					//取消订单
					this.msg = "您确定要取消此订单吗？";
					this.sign = sign;
					this.show = true;
				}else if(sign == "refund"){
					//售后
					uni.navigateTo({
						url:"/order/afterSale?order_id="+this.order_id
					})
				}
			},
			confirm(){
				this.show = false;
				if(this.sign == "cancel"){
					orderCancle(this,{order_id:this.order_id,type:1})
				}else if(this.sign == "receipt"){
					orderReceipt(this,{order_goods_id:this.order_goods_id,type:1})
				}
			},
			cancel(){
				this.show = false;
			},
			radioChange(e) {
				this.payType = e;
			},
			payConfirm(){
				this.settle();
				return;
				//微信支付
				if(this.payType == 'weixin'){
					// #ifdef MP-WEIXIN
					orderPay(this,{pay_type:'wx_mini',order_id:this.order_id,type:1})
					// #endif
					// #ifdef APP-PLUS
					//微信App支付
					//WxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:1})
					//汇聚App支付
					hjWxOrderPay(this,{pay_type:'wx_app',order_id:this.order_id,type:1})
					// #endif
				}
			},
			jumpPage(id){
				uni.navigateTo({
				  url: '/goods/goodsDetail?goods_id='+id
				});
			},
			onCopy(value){ //复制订单号
				// #ifdef H5
				var input = document.createElement('input'); // 直接构建input
				input.value = value; // 设置内容
				document.body.appendChild(input); // 添加临时实例
				input.select(); // 选择实例内容
				document.execCommand('Copy'); // 执行复制
				document.body.removeChild(input); // 删除临时实例
				uni.showToast({
					title:'复制成功~',
					icon:'none'
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
							title:'复制成功~',
							icon:'none'
						})
					}
				})
				// #endif
			},
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.header{
		background: #FFFFFF;
		height: 350rpx;
	}
	.header_box{
		background: linear-gradient(0deg, #6de3e9, #a0edf1) no-repeat;
		background-size: 100% 200rpx;
		height: 200rpx;
	}
	.orderStatus{
		display: flex;
		padding: 20rpx 60rpx;
	}
	.icon{
		width: 100rpx;
		height: 100rpx;
	}
	.icon image{
		width: 100%;
		height: 100%;
	}
	.status_txt{
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: 700;
		line-height: 100rpx;
		color: #FFFFFF;
	}
	.addtess_box{
		background-color: #FFFFFF;
		height: 200rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.userInfo{
		font-size: 35;
		font-weight: 700;
	}
	.userInfo text{
		margin-left: 20rpx;
	}
	.addressDetail{
		margin: 20rpx;
		color: #909399;
	}
	.goods_box{ 
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
	}
	.goods_img{
		width: 200rpx;
		height: 200rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		margin-left: 10rpx;
		width: 500rpx;
	}
	.goods_norms{
		margin-top: 20rpx;
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		height: 50rpx;
	}
	.btn_part{
		background-color: #FFFFFF;
		/* #ifdef MP-WEIXIN */
		display: flex;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		display: -webkit-box;
		/* #endif */
		justify-content: flex-end;
	}
	.btn_part view{
		margin-left: 20rpx;
	}
	.order_info{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding:  20rpx;
	}
	.order_info_item{
		display: flex;
		margin-bottom: 15rpx;
	}
	.order_info_title{
		color: #909399;
	}
	.order_price{
		display: flex;
		justify-content: space-between;
	}
	.payTime{
		padding: 0 40rpx;
		color: #909399;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
	}
	.modelPrice{
		color: #FA3534;
		font-size: 50rpx;
		font-weight: 650;
		padding: 0 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.copy{
		font-size: 24rpx;
		color: #888;
		background-color: #eee;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		display: inline-block;
	}
	.u-radio{text-align: right;float:right !important}
  .gift{
    color: #fa3534;
  }
	.modelContent{
		padding: 40rpx;
	}
	.accountData{
		padding: 15rpx 0 15px 200rpx;position: relative;
	}
	.accountData text{position: absolute;left:0;top:15px;display: inline-block;width:190rpx;text-align: right;}
	.accountData .u-input{border-bottom:0.5rpx solid #222;}
	.accountData .u-input input{min-width:260rpx}
	</style>
	<style lang="scss" scoped>
	.navigation {
		display: flex;
		margin-top: 100rpx;
		background-color: #ffffff;
		padding: 16rpx 16rpx;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		z-index: 10;
		justify-content: flex-end;
		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				text-align: center;
			}
			.buy {
				background: linear-gradient(90deg,#13797f,#20cbd4);
			}
		}
	}
</style>
